<template>
  <div class="form">
    <div class="field">
      <label class="label">Name</label>
      <div class="control input_content">
        <input :value="newTitle" @input="$emit('update:newTitle', $event.target.value)" class="input" placeholder="事项名称"
          ref="inputNameRef" type="text" v-autofocus :maxlength="20">
        <span class="inputLength">{{ newTitle.length }}/20</span>
      </div>
    </div>

    <div class="field">
      <label class="label">Message</label>
      <div class="control textarea_content">
        <textarea :placeholder="placeholder" :value="newNote" @input="$emit('update:newNote', $event.target.value)"
          class="textarea" :maxLength="200" />
        <span class="areaLength">{{ newNote.length }}/200</span>
      </div>
    </div>

    <div class="field is-grouped is-grouped-right">
      <div class="control">
        <slot name="buttons"></slot>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, toRef } from 'vue'
import { vAutofocus } from '@/directives/focus'
// import { useWatch } from '@/composables/useWatchCharacters.js'

const props = defineProps({
  newNote: String,
  newTitle: String,
  placeholder: {
    type: String,
    default: '添加事项'
  }
})
const emits = defineEmits(['update:newNote', 'update:newTitle']);

const inputNameRef = ref(null)
const focusTextArea = () => {
  inputNameRef.value.focus()
}

defineExpose({
  focusTextArea
});

// useWatch(toRef(props, 'newTitle'));

</script>

<style lang="scss" scoped>

.form {
  margin-bottom: 1rem;
}

.is-grouped {
  display: flex;
  justify-content: space-between;
}

.textarea_content {
  position: relative;

  .areaLength {
    position: absolute;
    right: 8px;
    top: 95px;
    color: rgb(188, 188, 188);
  }
}

.input_content {
  position: relative;

  .inputLength {
    position: absolute;
    right: 8px;
    top: 8px;
    color: rgb(188, 188, 188);
  }
}

</style>